<script setup>
import { showToast } from 'vant'
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()

// 所有照片数组
const photolist = [
  new URL('@/assets/img/drink.png', import.meta.url).href,
  new URL('@/assets/img/img2.png', import.meta.url).href,
  new URL('@/assets/img/tempimg.png', import.meta.url).href,
  new URL('@/assets/img/img4.png', import.meta.url).href,
  new URL('@/assets/img/img5.png', import.meta.url).href
]

//
let allPhoto = ref([])

photolist.forEach((item, index) => {
  allPhoto.value.push({ id: 'p' + index + 1, imgurl: item, active: false })
})

// 用户选择的照片数组
let userPhotoList = ref([])

let tiptext = ref('长按图片保存')
let chooseflag = ref(false)
const iscanprint = ref(false)

// 是否重选返回
const ctrl = route.query.ctrl
ctrl == 'rechoose' ? chooseflag.value = true : chooseflag.value = false

// 是否可以打印
const canprint = route.query.canprint
canprint == '0' ? iscanprint.value = false : iscanprint.value = true

watch(chooseflag, (newVal) => {
  if (newVal) {
    tiptext.value = `选中${userPhotoList.value.length}张相片`
  }
})

// 选择照片
const chooseImg = (id) => {
  if (!chooseflag.value) {
    return
  }
  allPhoto.value.forEach((item) => {
    if (item.id == id && !item.active) {
      userPhotoList.value.push(item)
      item.active = true
      if (userPhotoList.value.length > 2) {
        userPhotoList.value.forEach((sitem, sindex) => {
          if (sindex == 0) {
            sitem.active = false
          }
        })
        userPhotoList.value.shift()
      }
      tiptext.value = `选中${userPhotoList.value.length}张相片`
      // console.log(userPhotoList.value)
    }
  })
}

// 预览模板
const toPreview = () => {
  if (userPhotoList.value.length < 2) {
    return showToast('请至少选择两张照片')
  }
  router.replace({ path: '/preview', query: { list: JSON.stringify(userPhotoList.value) } })
}
</script>

<template>
  <div class="index box bg clmcenter">
    <p class="msgtext">{{ tiptext }}</p>
    <div class="photolist">
      <div :class="['pitem', item.active ? 'active' : '']" v-for="item in allPhoto" :key="item.id"
        @click="chooseImg(item.id)">
        <img :src="item.imgurl" />
      </div>
    </div>
    <div class="slidetips clmstart" v-show="photolist.length > 8">
      <p>下滑查看更多</p>
      <img src="@/assets/img/more.png" />
    </div>
    <img src="@/assets/img/btn_choose.png" class="btn_choose" v-show="!chooseflag && iscanprint"
      @click="chooseflag = true" />
    <img src="@/assets/img/btn_preview.png" v-show="chooseflag" class="btn_choose" @click="toPreview" />
  </div>
</template>

<style lang="scss" scoped>
.index {
  .msgtext {
    font-size: 24px;
    color: #ffffff;
    letter-spacing: 2px;
  }

  .photolist {
    margin-top: 30px;
    width: 100%;
    height: 758px;
    overflow-y: scroll;
    display: grid;
    grid-template-columns: repeat(2, 320px); // 列宽
    grid-template-rows: repeat(auto-fill, 180px); // 行高
    justify-content: center; // 内容区域水平居中
    align-content: start; // 内容垂直居上
    gap: 12px;

    .pitem {
      position: relative;
      width: 320px;
      height: 180px;

      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }

    .active {
      border: 1px solid #ffffff;
      box-sizing: border-box;
    }
  }

  .slidetips {
    margin-top: 40px;

    p {
      font-size: 24px;
      color: #ffffff;
      letter-spacing: 2px;
    }

    img {
      width: 14px;
      margin-top: 10px;
    }
  }

  .btn_choose {
    margin-top: 25px;
    width: 371px;
  }
}
</style>
